<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="resources/w3-css3-list-styles-alphabetic.css" type="text/css" charset="utf-8" />
    <style>
        .test ol { float: left; padding-right: 20px; }
        .test h2 { clear: left; }
        hr { clear: left;}
        hr + h2 { color: blue; }
        
        /* 
        The following styles are ordered as they appear in section 6.1 + 6.3 of the
        3 February 2015 CR of the CSS3 Counter Styles Level 3 module <http://www.w3.org/TR/css-counter-styles-3/#simple-numeric>.
        */
        
        ol.armenian { list-style-type: armenian; }

        ol.upper-armenian { list-style-type: upper-armenian; }

        ol.lower-armenian { list-style-type: lower-armenian; }

        ol.cjk-ideographic { list-style-type: cjk-ideographic; }

        ol.georgian { list-style-type: georgian; }

        ol.hebrew { list-style-type: hebrew; }

        ol.syriac { list-style-type: syriac; }

        ol.tamil { list-style-type: tamil; }

        ol.lower-roman { list-style-type: lower-roman; }

        ol.upper-roman { list-style-type: upper-roman; }

        ol.japanese-formal { list-style-type: japanese-formal; }

        ol.japanese-informal { list-style-type: japanese-informal; }

        ol.simp-chinese-formal { list-style-type: simp-chinese-formal; }

        ol.simp-chinese-informal { list-style-type: simp-chinese-informal; }

        ol.trad-chinese-formal { list-style-type: trad-chinese-formal; }

        ol.trad-chinese-informal { list-style-type: trad-chinese-informal; }

        ol.ethiopic-numeric { list-style-type: ethiopic-numeric; }
    </style>
    <script src="resources/dump-list.js"></script>
    <script>
        function runTest()
        {
            if (!window.testRunner)
                return;
                
            testRunner.dumpAsText();
            filterListsWithReplacement(document.querySelectorAll(".test ol"), testListItemMarkerEqualsListItemText);
            document.body.removeChild(document.getElementById("description")); // Remove description when running in DRT.
        }
        window.onload = runTest;
    </script>
</head>
<body>
    <h1>CSS3 Fallback to Decimal List Style</h1>
    <div id="description">
        <p>This tests that we fallback to the decimal list style type when the ordinal is outside the representable range for the list style type as per the <a href="http://www.w3.org/TR/css-counter-styles-3/">CSS3 Counter Styles Level 3 module</a> (CR 3 Februari 2015). This test PASSED if the list item matches its marker for every list item (below).</p>
        <p>Note, as of 02/05/2021, syriac is unsupported and hence have expected failure results.</p>
    </div>
    <hr/>
    <h2>Algorithmic</h2>
    <div class="test">
        <h2>armenian</h2>
        <ol class="armenian" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x531;</li>
        </ol>
        <ol class="armenian" start="99999999">
            <li>&#x554;&#x302;&#x54B;&#x302;&#x542;&#x302;&#x539;&#x302;&#x554;&#x54B;&#x542;&#x539;</li>
            <li>100000000</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>cjk-ideographic</h2>
        <ol class="cjk-ideographic" start="-1">
            <li>&#x8CA0;&#x4E00;</li>
            <li>&#x96F6;</li>
            <li>&#x4E00;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-numeric</h2>
        <ol class="ethiopic-numeric" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x1369;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>georgian</h2>
        <ol class="georgian" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x10D0;</li>
        </ol>
        <ol class="georgian" start="19999">
            <li>&#x10F5;&#x10F0;&#x10E8;&#x10DF;&#x10D7;</li>
            <li>20000</li>
            <li>20001</li>
        </ol>
    </div>
    <div class="test">
        <h2>hebrew</h2>
        <ol class="hebrew" start="-1">
            <li>-1</li>
            <li>&#x5D0;&#x5E4;&#x5E1;</li>
            <li>&#x5D0;</li>
        </ol>
        <ol class="hebrew" start="999999">
            <li>&#x5EA;&#x5EA;&#x5E7;&#x5E6;&#x5D8;&#x5F3;&#x5EA;&#x5EA;&#x5E7;&#x5E6;&#x5D8;</li>
            <li>1000000</li>
            <li>1000001</li>
        </ol>
    </div>
    <div class="test">
        <h2>japanese-formal</h2>
        <ol class="japanese-formal" start="-1">
            <li>マイナス壱</li>
            <li>零</li>
            <li>壱</li>
        </ol>
    </div>
    <div class="test">
        <h2>japanese-informal</h2>
        <ol class="japanese-informal" start="-1">
            <li>マイナス一</li>
            <li>〇</li>
            <li>一</li>
        </ol>
    </div>
    <div class="test">
        <h2>lower-armenian</h2>
        <ol class="lower-armenian" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x0561;</li>
        </ol>
        <ol class="lower-armenian" start="99999999">
            <li>&#1412;&#770;&#1403;&#770;&#1394;&#770;&#1385;&#770;&#1412;&#1403;&#1394;&#1385;</li>
            <li>100000000</li>
        </ol>
    </div>
    <div class="test">
        <h2>lower-roman</h2>
        <ol class="lower-roman" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>i</li>
        </ol>
    </div>
    <div class="test">
        <h2>simp-chinese-formal</h2>
        <ol class="simp-chinese-formal" start="-1">
            <li>&#x8D1F;&#x58F9;</li>
            <li>&#x96F6;</li>
            <li>&#x58F9;</li>
        </ol>
    </div>
    <div class="test">
        <h2>simp-chinese-informal</h2>
        <ol class="simp-chinese-informal" start="-1">
            <li>&#x8D1F;&#x4E00;</li>
            <li>&#x96F6;</li>
            <li>&#x4E00;</li>
        </ol>
    </div>
    <div class="test">
        <!-- FIXME: We don't currently support this list-style-type. These are expected failure results. -->
        <h2>syriac</h2>
        <ol class="syriac" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>1</li>
        </ol>
    </div>
    <div class="test">
        <h2>tamil</h2>
        <ol class="tamil" start="-1">
            <li>-௧</li>
            <li>௦</li>
            <li>௧</li>
        </ol>
    </div>
    <div class="test">
        <h2>trad-chinese-formal</h2>
        <ol class="trad-chinese-formal" start="-1">
            <li>&#x8CA0;&#x58F9;</li>
            <li>&#x96F6;</li>
            <li>&#x58F9;</li>
        </ol>
    </div>
    <div class="test">
        <h2>trad-chinese-informal</h2>
        <ol class="trad-chinese-informal" start="-1">
            <li>&#x8CA0;&#x4E00;</li>
            <li>&#x96F6;</li>
            <li>&#x4E00;</li>
        </ol>
    </div>
    <div class="test">
        <h2>upper-armenian</h2>
        <ol class="upper-armenian" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x0531;</li>
        </ol>
        <ol class="upper-armenian" start="99999999">
            <li>&#x554;&#x302;&#x54B;&#x302;&#x542;&#x302;&#x539;&#x302;&#x554;&#x54B;&#x542;&#x539;</li>
            <li>100000000</li>
        </ol>
    </div>
    <div class="test">
        <h2>upper-roman</h2>
        <ol class="upper-roman" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>I</li>
        </ol>
    </div>
    <hr/>
    <h2>Alphabetic</h2>
    <div class="test">
        <h2>cjk-earthly-branch</h2>
        <ol class="cjk-earthly-branch" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x5B50;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>cjk-heavenly-stem</h2>
        <ol class="cjk-heavenly-stem" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x7532;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-halehame</h2>
        <ol class="ethiopic-halehame" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x1200;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-halehame-am</h2>
        <ol class="ethiopic-halehame-am" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x1200;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hangul-consonant</h2>
        <ol class="hangul-consonant" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x3131;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hangul</h2>
        <ol class="hangul" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#xAC00;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hiragana-iroha</h2>
        <ol class="hiragana-iroha" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x3044;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>hiragana</h2>
        <ol class="hiragana" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x3042;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>katakana-iroha</h2>
        <ol class="katakana-iroha" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x30A4;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>katakana</h2>
        <ol class="katakana" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x30A2;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>lower-alpha</h2>
        <ol class="lower-alpha" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x0061;</li>
        </ol>
    </div>
    <div class="test">
        <h2>lower-latin</h2>
        <ol class="lower-latin" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x0061;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>lower-greek</h2>
        <ol class="lower-greek" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x03B1;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-halehame-ti-er</h2>
        <ol class="ethiopic-halehame-ti-er" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x1200;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>ethiopic-halehame-ti-et</h2>
        <ol class="ethiopic-halehame-ti-et" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x1200;</li>
        </ol>
    </div>
    
    <div class="test">
        <h2>upper-alpha</h2>
        <ol class="upper-alpha" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x0041;</li>
        </ol>
    </div>
    <div class="test">
        <h2>upper-latin</h2>
        <ol class="upper-latin" start="-1">
            <li>-1</li>
            <li>0</li>
            <li>&#x0041;</li>
        </ol>
    </div>
</body>
</html>
